<template>
  <div class="app-container">
    <el-drawer title="补料单详情" :visible.sync="showFlag" size="80%" :append-to-body="true">
      <template v-slot:title>
        <span class="titleDiv">补料单详情</span>
      </template>
      <div style="padding: 0 20px;">
        <el-tag size="large" style="font-size: 20px;">基本信息</el-tag>
        <hr />
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <span>补料编码：</span>
              <span>{{ form.supplyCode }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>工单编号：</span>
              <span>{{ form.workorderCode }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>领料人：</span>
              <span>{{ form.createBy }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <span>审核人：</span>
              <span>{{ form.checkUser }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span>备注：</span>
              <span>{{ form.remark }}</span>
            </div>
          </el-col>
        </el-row>
        <el-tag size="large" style="font-size: 20px;margin-bottom:10px;margin-top:20px">操作记录</el-tag>
        <hr />
        <!-- <div style="margin-top: 25px;" v-if="personList.length>0">
          <el-steps :active="stepResult=='REFUSE' ?activeStep: activeStep" align-center>
            <el-step
              v-for="(item, i ) in personList"
              :key="item.userMobile"
              :title="item.userNickname"
              :description="item.resultName"
              :status="item.result=='REFUSE' ? 'error' : ''"
            ></el-step>
          </el-steps>
        </div>-->
        <div style="margin-top: 25px;" v-if="pushList.length>0">
          <el-table v-loading="loadinga" :data="pushList" max-height="500px">
            <el-table-column type="index" label="序号" align="center" width="50" />
            <el-table-column label="补料编码" align="center" prop="supplyCode" />
            <el-table-column label="当前流程状态" align="center" prop="flowStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.supply_workflow_status" :value="scope.row.flowStatus" />
              </template>
            </el-table-column>
            <el-table-column label="模块名称" align="center" prop="moudleName" />
            <el-table-column label="操作人" width="110px" align="center" prop="operateBy" />
            <el-table-column label="操作时间" width="180px" align="center" prop="operateTime" />
          </el-table>
        </div>
        <el-empty v-else description="暂无数据" :image-size="50"></el-empty>
        <el-tag size="large" style="font-size: 20px;margin-bottom:10px;margin-top:10px">物料信息</el-tag>
        <hr />
        <div>
          <el-table v-loading="loading" :data="detailList">
            <el-table-column type="index" label="序号" align="center" width="50" />
            <el-table-column label="物料编码" align="center" prop="itemCode" />
            <el-table-column label="物料名称" align="center" prop="sonname" />
            <el-table-column label="规格" align="center" prop="specification" />
            <el-table-column label="单位" align="center" prop="unitOfMeasure" />
            <el-table-column label="数量" align="center" prop="itemAmount">
              <template slot-scope="scope">
                <span>{{scope.row.itemAmount}}</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          /> -->
        </div>
      </div>
    </el-drawer>
  </div>
</template>
  
<script>
import {
  getItemListDetail,
  getDetail,
  delDetail,
  addDetail,
  updateDetail,
  listPushdown
} from "@/api/mes/pro/supplyDetail";
import {
  listMaterialInfo,
  getSupply,
  getApprovalList
} from "@/api/mes/pro/supply";
export default {
  name: "supplyDetails",
  props: {
    supplyId: undefined,
    optType: undefined
  },
  dicts:['supply_workflow_status'],
  data() {
    return {
      // 是否显示弹出层
      showFlag: false,
      // 遮罩层
      loading: false,
      loadinga: false,
      pushList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产补料详细信息表格数据
      detailList: [],
      // 弹出层标题
      title: "",

      //勾选的内容
      selectData: null,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        materialSerial: null,
        productCode: null,
        productName: null,
        productSpec: null,
        measureName: null,
        itemAmount: null,
        supplyId: this.supplyId,
        suppyTime: null,
        workorderCode: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //审批人
      personList: [],
      //处于哪个环节
      activeStep: null,
      stepResult: null,
      warehouseList: []
    };
  },
  created() {
    if (this.parentId) {
      this.getDetail();
      this.getList();
      this.getPushdown();
    }
  },
  watch: {
    supplyId: function(val) {
      this.supplyId = val;
      this.queryParams.supplyId = val;
      this.reset();
      if (val) {
        this.getDetail();
        this.getList();
        this.getPushdown();
      }
    }
  },
  methods: {
    getDetail() {
      getSupply(this.supplyId).then(response => {
        this.form = response.data || {};
        this.title = "查看生产补料单";
        if (response.data.processInstanceId) {
          getApprovalList(this.supplyId).then(response => {
            this.personList = response.data.personList;
            for (const key in this.personList) {
              if (this.personList[key].result != undefined) {
                if (this.personList[key].result == "AGREE") {
                  this.personList[key].resultName = "同意";
                } else if (this.personList[key].result == "REFUSE") {
                  this.personList[key].resultName = "拒绝";
                }
              }
            }
            this.activeStep = response.data.step;
            this.stepResult = response.data.supplyResult;
          });
        }
      });
    },
    /** 查询生产补料详细信息列表 */
    getList() {
      this.loading = true;
      getItemListDetail(this.queryParams).then(response => {
        this.detailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getPushdown() {
      this.loadinga = true;

      listPushdown(this.queryParams).then(response => {
        this.pushList = response.rows;
        this.total = response.total;
        this.loadinga = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        materialSerial: null,
        productCode: null,
        productName: null,
        productSpec: null,
        measureName: null,
        itemAmount: null,
        supplyId: null,
        suppyTime: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null
      };
      this.personList = [];
      //处于哪个环节
      this.activeStep = null;
      this.stepResult = null;
      this.warehouseList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.info("selection===", selection);
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
      this.selectData = selection;
      this.$emit("onSelected", this.selectData);
    },
    refreshMaterialList(workorderCode) {
      this.loading = false;
      this.queryParams.workorderCode = workorderCode;
      listMaterialInfo(this.queryParams).then(response => {
        this.detailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
.tabsDiv {
  padding: 20px;
  padding-top: 0;
}
.tabsDiv ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  font-weight: 700;
  font-size: 18px;
}
.drawerFooter {
  text-align: right;
  padding: 20px;
}
.bg-purple {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    display: inline-block;
    width: 110px;
    white-space: nowrap;
    line-height: 30px;
  }
}
.dialog-footer {
  padding-top: 20px;
  text-align: center;
}
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}
</style>
  